<template>
  <page-container boxBackground="transparent" :base-tab="0" :shownav="true" navtitle="新城区两代表一委员数字工作平台"
                  :istabbox="true"
                  :isSelect="false">
    <view class="home-root">
      <view class="content-item my-documents">
        <view class="header">
          <view class="title">我的证件</view>
          <!-- <view class="subtitle">更多&nbsp;&gt;</view> -->
        </view>
        <view class="row">
          <view class="grid" v-for="(card,index) in  cardList" :key="index" :class="'grid_'+index"
                @click="cardClick(card)">
            <view class="item">
              <view class="img">
                <image :src="card.icon"></image>
              </view>
              <view class="title">{{ card.title }}</view>
            </view>
            <view class="view title">
              查看证件
            </view>
          </view>
        </view>
      </view>
      <!-- 常用服务 begin -->
      <view class="content-item  open-gift">
        <view class="header">
          <view class="title">常用服务</view>
          <!-- <view class="subtitle" @tap="openMyAdvise">更多&nbsp;&gt;</view> -->
        </view>
        <view class="row">

          <view class="grid" @click="goSubPage(petitioningCommissionerPage)">
            <image src="/static/img/home/serve6.png"></image>
            <view class="title">
              通讯录
            </view>
          </view>
          <view class="grid" @click="scan">
            <image src="/static/img/home/serve9.png"></image>
            <view class="title">
              扫一扫
            </view>
          </view>
          <!-- <view class="grid">
            <image src="/static/img/home/serve8.png"></image>
            <view class="title">
              常见问题
            </view>
          </view>
          <view class="grid">
            <image src="/static/img/home/service-7.png"></image>
            <view class="title">
              履职指南
            </view>
          </view>
          <view class="grid">
            <image src="/static/img/home/service-8.png"></image>
            <view class="title">
              其他
            </view>
          </view> -->
        </view>
      </view>
      <!-- 常用服务 end -->
      <!-- 新闻动态 begin -->
      <view class="content-item  open-gift">
        <view class="header">
          <view class="title">工作动态</view>
          <view class="subtitle" @tap="openMyAdvise(1)">更多&nbsp;&gt;</view>
        </view>
        <view class="content-news">
          <news-item :info="newList" bkColor="#fff"></news-item>
          <!-- <view class="news-list" v-for="item in newList" :key="item.id" @click="itemClick(item)">
            <view class="news-img">
              <image
                :src="item.newsCover && item.newsCover !=='' ? item.newsCover : '/static/img/home/news-1.png'">
              </image>
            </view>
            <view class="news-content">
              <view class="content-top">
                {{ item.newsTitle }}
              </view>
              <view class="content-bottom">{{ item.publishTime }}</view>
            </view>
          </view> -->
        </view>
      </view>
      <!-- 新闻动态 begin -->
      <!-- 通知公告 begin -->
      <view class="content-item  open-gift">
        <view class="header">
          <view class="title">通知公告</view>
          <view class="subtitle" @tap="openMyAdvise(2)">更多&nbsp;&gt;</view>
        </view>
        <view class="content-announcement">
          <news-item :info="announcement" bkColor="#fff"></news-item>
          <!-- <view class="announcement-list" v-for="item in announcement" :key="item.id"
            @click="itemClick(item)">
            <view class="announcement-top">
              {{ item.newsTitle }}
            </view>
            <view class="announcement-bottom">
              {{ item.publishTime }}
            </view>
          </view> -->
        </view>
      </view>
      <!-- 通知公告 end -->
    </view>
    <u-loading-page :loading="loading"></u-loading-page>
  </page-container>
</template>

<script>
import NewsItem from '@/components/news-item'; //全局图片组件

import {
  requestGet,
  getQueryHeaders
} from "@/util/means/request";
import {
  NEWS_LIST
} from "@/api/news";
import {
  getFileAccessHttpUrl
} from "@/util/fileUtil";
import {
  baseMixins
} from "@/util/baseMixins";
import {
  documentsDetailPage,
  documentsMemberOfTheCPPCCPage,
  documentsPartyRepresentativePage, petitioningCommissionerPage,
} from "@/util/publicConfig";
import {
  initUserInfo
} from "@/service/user";

export default {
  name: "index",
  mixins: [baseMixins],
  components: {
    NewsItem,
  },
  data() {
    return {
      petitioningCommissionerPage,
      loading: false, // 加载中
      newList: [],
      announcement: [],
      testList: Array.from(Array(10)).map((item, index) => {
        return {
          id: index,
          name: index
        }
      }),
      baseCardList: [
        {
          title: 'partyAuthName',
          icon: '/static/img/home/documents-2.png',
          url: documentsPartyRepresentativePage,
          showFiledName: 'partyAuth',
        },
        {
          title: 'npcAuthName',
          icon: '/static/img/home/documents-1.png',
          url: documentsDetailPage,
          showFiledName: 'npcAuth',
        },
        {
          title: 'govAuthName',
          icon: '/static/img/home/documents-3.png',
          url: documentsMemberOfTheCPPCCPage,
          showFiledName: 'govAuth',
        }
      ],
      cardList: [],
    }
  },
  methods: {
    scan() {
      // #ifdef APP-PLUS
      // 只允许通过相机扫码
      uni.scanCode({
        // onlyFromCamera: true,
        success: (res => {
          console.log(res, "##################");
          this.$jump.toJump(res.result)
        })
      });
      // #endif
    },
    //获取新闻的方法
    getNewsAndAnnouncement() {
      this.loading = true
      let ower = this
      requestGet({
        url: NEWS_LIST,
        data: {
          pageNo: 1,
          pageSize: 3,
          newsType: '1'
        },
        header: getQueryHeaders()
      }).then(res => {
        //格式化图片地址
        // res.records.forEach(item => {
        // 	item.newsCover = getFileAccessHttpUrl(item.newsCover)
        // })
        ower.newList = res.records
      }).finally(res => {
        ower.loading = false
      })
      requestGet({
        url: NEWS_LIST,
        data: {
          pageNo: 1,
          pageSize: 3,
          newsType: '2'
        },
        header: getQueryHeaders()
      }).then(res => {
        ower.announcement = res.records
      }).finally(res => {
        ower.loading = false
      })
    },

    makeASuggestion() {
    },
    // 1新闻 2 通知公告
    openMyAdvise(type) {
      this.$jump.toJump('pages/message/notice?type=' + type)
    },
    itemClick(item) {
      this.$jump.toJump('pages/message/details?id=' + item.id)
    },
    cardClick(cardItem) {
      this.goSubPage(cardItem.url)
    }

  },
  onLoad() {
    let owner = this
    initUserInfo().then(userInfo => {
      owner.cardList = owner.baseCardList.filter(dataItem => {
        return dataItem.showFiledName == null || userInfo[dataItem.showFiledName] == 1
      }).map(dataItem => {
        dataItem.title = userInfo[dataItem.title]
        return dataItem
      })
    })
    this.getNewsAndAnnouncement()
  },
  created() {

  },
  mounted() {
  }
}
</script>

<style scoped lang="scss">
.grid_0 {
  background-image: url(@/static/img/home/documents-bg-1.png);
}

.grid_1 {
  background-image: url(@/static/img/home/documents-bg-2.png);
}

.grid_2 {
  background-image: url(@/static/img/home/documents-bg-3.png);
}

.home-root {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 30rpx;
  overflow: auto;

  .content-item {
    padding: 20rpx;
    //background-color: red;
    background-color: $bg-color-white;
    border-radius: $border-radius-lg;
    margin-bottom: 20rpx;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;

      .title {
        font-size: $font-size-lg;
        font-weight: 500;
      }

      .subtitle {
        font-size: $font-size-base;
        color: $text-color-grey;
      }
    }

    .row {
      display: flex;
      flex-wrap: wrap;

      .grid {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 10rpx 0;
        // padding: 20rpx;

        image {
          width: 70rpx;
          height: 70rpx;
          margin-bottom: $spacing-row-base;
        }

        .title {
          font-size: $font-size-base;
          color: $text-color-base;
          display: flex;
          align-items: baseline;
          font-weight: 800;
        }
      }

    }

    .content-news {

      //background-color: red;
      .news-list {
        margin: 30rpx 0;
        padding-bottom: 30rpx;
        border-bottom: #C7C7C7 1rpx solid;
        display: flex;

        .news-img {
          image {
            width: 243rpx;
            height: 151rpx;
            border-radius: $border-radius-lg;
          }
        }

        .news-content {
          margin-left: 30rpx;
          width: 470rpx;

          .content-top {
            //padding: 2px 0;
            font-size: 30rpx;
            width: 420rpx;
            height: 80rpx;
            color: #222222;
            //background-color: yellow;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }

          .content-bottom {
            margin-top: 40rpx;
            font-size: 26rpx;
            color: #ABABAB;
            //background-color: pink;
          }
        }
      }

      .news-list:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
      }
    }
  }

  .content-announcement {
    .announcement-list {
      border-bottom: #C7C7C7 1rpx solid;
      margin-bottom: 32rpx;

      //background-color: red;
      .announcement-top {
        width: 100%;
        height: 88rpx;
        font-size: 30rpx;
        color: #222222;
        //background-color: red;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .announcement-bottom {
        margin-bottom: 32rpx;
        margin-top: 17rpx;
        font-size: 26rpx;
        color: #ABABAB;
      }
    }

    .announcement-list:last-child {
      //background-color: red;
      border-bottom: none;
      margin-bottom: 0;
    }

    .announcement-list:last-child .announcement-bottom {
      margin-bottom: 0;
    }
  }

  .my-documents {
    .grid {
      width: 100% !important;
    }

    .row {
      .grid {
        //background-image: url(@/static/img/home/documents-bg-1.png);
        background-size: 100% 100%;
        align-items: start;
        padding: 0;

        .item {
          display: flex;
          align-items: center;
          padding: 20rpx;

          image {
            margin-bottom: 0;
          }

          .title {
            padding: 0 30rpx;
          }
        }

        .view {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
          background-color: rgba(255, 255, 255, 0.6);
          padding: 10rpx 0;
        }
      }

    }
  }
}
</style>
